<template>
    <div v-if="showCinemas.length>0">
        <myhead :title="$route.query.name" :back="true"></myhead>
        <div class="nav">
             <div class="nav-box">
                 <div class="nav-item " @click="changeCurrent(i)" :class="current==i?'nav-active':''" v-for="(l,i) in showCinemas" :key="i" >
                     {{l.showDate * 1000 | datecalendar }}
                 </div>
             </div>
        </div>
        <cinemaList :cinemas="cinemas" :filmId="film.filmId" :date="showCinemas[current].showDate">

        </cinemaList>
    </div>
</template>


<script>
export default {
    data(){
        return {
            film:{},
            showCinemas:[],
            current:0,
            cinemas:[]
        }
    },
    methods:{
        changeCurrent(index){
            this.current = index;
            this.getCinemas()
        },
        getCinemas(){
            this.$ajax.postmaizuo({
                cityId:this.city.cityId,
                cinemaIds:this.showCinemas[this.current].cinemaList.join(',')
            },{
                'X-Host': 'mall.film-ticket.cinema.batch-cinema'
            })
            .then(res=>{
                this.cinemas = res.data.data.cinemas
            })
        }
    },
    mounted(){
        this.$ajax.getmaizuo({
            filmId:this.$route.params.filmId,
        },{
            'X-Host': 'mall.film-ticket.film.info'
        })
        .then(res=>{
            this.film = res.data.data.film
        })


        this.$ajax.getmaizuo({
            filmId:this.$route.params.filmId,
            cityId:this.city.cityId
        },{
            'X-Host': 'mall.film-ticket.cinema.film-show-cinema'
        })
        .then(res=>{
            this.showCinemas = res.data.data.showCinemas
            this.getCinemas()
        })
    }
}
</script>


<style lang="scss" scoped>
.nav{
    width:100%;
    padding:5px 10px;
    overflow: hidden;
    .nav-box{
        display: flex;
        overflow: auto;
        .nav-item{
            width:100px;
            padding:0 5px;
            height:46px;
            line-height: 46px;
            color: #191a1b;
            text-align: center;
            font-size: 14px;
            flex-shrink: 0;
        }
        .nav-active{
            color:#ff5f16;
            border-bottom:1px solid #ff5f16;

        }
    }
}
</style>
